<template>
  <div class="conten-warp">
    <cus-card>
      <div class="conten-warp-search fs">
        <div>
          <Button type="error" @click="$router.go(-1)">
            返回
          </Button>
        </div>
      </div>
      <div class="conten-warp-title flex">
        <h2>{{ minDate }} - {{ maxDate }} 重点食材价格</h2>
      </div>
      <div class="conten-warp-chartBox">
        <div
          class="conten-warp-chartBox-item"
          :class="[index>2?'mt_26':'']"
          v-for="(item,index) in data"
          :key="item.key"
        >
          <keyIngredientsChart
            :title="item.key"
            :dataX="dataX"
            :dataY="item.value"
            :color="[item.color]"
            :areaStyleColor="item.areaStyleColor"
          ></keyIngredientsChart>
        </div>
      </div>
    </cus-card>
  </div>
</template>
  
  <script>
import keyIngredientsChart from "./keyIngredientsChart.vue";
import { getShow } from "@/api/organ/business";

export default {
  components: { keyIngredientsChart },
  data() {
    return {
      form: {},
      colorArray: [
        "#FFA901",
        "#2B8EF3",
        "#3CD495",
        "#165DFF",
        "#AE01FF",
        "#48E5E5",
      ],
      areaStyleColorArray: [
        ["#FFF4DF", "#FFFFFF"],
        ["#E4F1FD", "#FFFFFF"],
        ["#E6FAF2", "#FFFFFF"],
        ["#E2EBFF", "#FFFFFF"],
        ["#F5E0FF", "#FFFFFF"],
        ["#E6FBFB", "#FFFFFF"],
      ],
      data: [],
      dataX: [],
      maxDate:"",
      minDate:""
    };
  },
  mounted() {
    this.getShowApi();
  },
  methods: {
    getShowApi() {
      return new Promise((resolve) => {
        getShow({
          publishId: this.$route.query.id,
          type: 1,
        }).then((res) => {
          if (res.code === 1) {
            console.log('==========',res)
              res.data.dataList.forEach((element, index) => {
                element.color = this.colorArray[index];
                element.areaStyleColor = this.areaStyleColorArray[index];
              });
            this.data = res.data.dataList;
            this.dataX = res.data.date;
            this.minDate = res.data.minDate;
            this.maxDate = res.data.maxDate;
            resolve();
          }
        });
      });
    },
  },
};
</script>
  <style lang="less" scoped>
.conten-warp-chartBox {
  // height: 670px;
  height:calc(~'100vh - 270px');
  width: 100%;
  margin-top: 50px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  &-item {
    width: 33%;
    height: 48%;
  }
}
.fs {
  display: flex;
  justify-content: space-between;
}
.mt_26 {
  margin-top: 26px;
}
</style>